<script>
import { mapHTUrl } from '../../../libs/mapTypeUtil'
import { HTgetCenter, HTgetZoom } from '../../../libs/HT-map-Util'

export default {
  name: 'pickPoint',
  data () {
    return {
      markerMapModal: false,
      map: null,
      url: mapHTUrl(),
      resultLatLng: [],
      returnObject: {},
      companyInfo: {},
      Objectinfo: {}
    }
  },
  methods: {
    init (type, companyInfo, Objectinfo) {
      console.log(type, companyInfo, Objectinfo)
      this.companyInfo = companyInfo
      this.Objectinfo = Objectinfo
      if (type === 'insert') {
        this.userCompanyInfo()
      }
      if (type === 'update') {
        if (this.Objectinfo.GIS_LAT === undefined || this.Objectinfo.GIS_LAT === '' ||
          this.Objectinfo.GIS_LON === undefined || this.Objectinfo.GIS_LON === '') {
          this.$Notice.error({ title: '未设置中心点！', desc: '将使用默认坐标展示！' })
          this.userCompanyInfo()
        } else {
          this.markerMapModal = true
          let _this = this
          setTimeout(function () {
            _this.initMap(HTgetCenter(_this.Objectinfo, _this), _this.Objectinfo)
          }, 1000)
        }
      }
    },
    userCompanyInfo () {
      if (this.companyInfo.csc_mapjson_ht === undefined || this.companyInfo.csc_mapjson_ht === '') {
        this.$Notice.error({ title: '未设置中心点！', desc: '将使用默认坐标展示！' })
        this.$set(this.companyInfo, 'csc_mapjson_ht', '41.803408523469855,123.40643097319376')
      }
      this.markerMapModal = true
      let _this = this
      setTimeout(function () {
        _this.initMap(HTgetCenter(_this.companyInfo, _this), _this.companyInfo)
      }, 1000)
    },
    initMap (e1, e2) {
      this.map = L.map('HTmapMarkerForDangQun', {
        crs: L.CRS.EPSG4326,
        preferCanvas: true,
        center: e1,
        maxZoom: 19,
        minZoom: 9,
        zoom: 3,
        logoControl: false
      })
      L.supermap.tiledMapLayer(this.url).addTo(this.map)
      console.log(e2)
      this.createMaker(HTgetCenter(e2, this))
      this.map.setView(HTgetCenter(e2, this), HTgetZoom(e2) - 1)
    },
    createMaker (latlng) {
      this.centerMarker = L.marker(latlng, {
      }).addTo(this.map)
      let _this = this
      _this.map.on('click', function (e) {
        var lat = e.latlng.lat
        var lng = e.latlng.lng
        _this.centerMarker.setLatLng([lat, lng])
        _this.resultLatLng = _this.centerMarker.getLatLng().lat + ',' + _this.centerMarker.getLatLng().lng
      })
    },
    markerMapModalConfirm () {
      let cscmapjson = this.resultLatLng
      this.$set(this.returnObject, 'csc_mapjson_ht', cscmapjson)
      this.$emit('HTreturnMapMarkerInfoDangqun', this.returnObject)
    }
  },
  beforeDestroy () {
    this.map && this.map.remove()
  },
  watch: {
    markerMapModal (val) {
      if (!val) {
        this.map && this.map.remove()
      }
    }
  }
}
</script>

<template>
<div>
  <Modal v-model="markerMapModal" title="选取位置" fullscreen  @on-ok="markerMapModalConfirm">
    <div id="HTmapMarkerForDangQun"></div>
  </Modal>
</div>
</template>

<style scoped>
#HTmapMarkerForDangQun {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
/deep/ .leaflet-top{
  top: 85%;
}
</style>
